<template>
  <!-- 欢迎语和副标题 -->
  <div class="dashboard-welcome">
    <h2>欢迎使用库存管理</h2>
    <p>高效管理您的库存信息</p>
  </div>

  <!-- 统计信息模块 -->
  <el-row :gutter="20" class="dashboard-stats">
    <el-col :span="6">
      <el-card class="stat-card stat-blue">
        <div class="stat-title">库存总数</div>
        <div class="stat-value">{{ queryPage.total }}</div>
        <el-icon><i-ep-box /></el-icon>
      </el-card>
    </el-col>
    <el-col :span="6">
      <el-card class="stat-card stat-green">
        <div class="stat-title">上架商品</div>
        <div class="stat-value">{{ tableData.filter(i=>i.status==1).length }}</div>
        <el-icon><i-ep-success-filled /></el-icon>
      </el-card>
    </el-col>
    <el-col :span="6">
      <el-card class="stat-card stat-red">
        <div class="stat-title">下架商品</div>
        <div class="stat-value">{{ tableData.filter(i=>i.status==0).length }}</div>
        <el-icon><i-ep-remove-filled /></el-icon>
      </el-card>
    </el-col>
    <el-col :span="6">
      <el-card class="stat-card stat-orange">
        <div class="stat-title">供应商数</div>
        <div class="stat-value">{{ [...new Set(tableData.map(i=>i.supplier))].length }}</div>
        <el-icon><i-ep-user /></el-icon>
      </el-card>
    </el-col>
  </el-row>

  <!-- 卡片式商品展示 + 快捷录入右侧布局 -->
  <div class="main-content" style="display: flex; gap: 24px; align-items: flex-start;">
    <!-- 左侧：卡片列表 -->
    <div style="flex: 1 1 0; min-width: 0;">
      <el-row :gutter="32" class="dashboard-cards">
        <el-col v-for="item in tableData" :key="item.id" :xs="24" :sm="12" :md="8" :lg="8" style="margin-bottom: 32px; display: flex; justify-content: center;">
          <el-card class="custom-card" shadow="hover" :data-status="item.status">
            <div class="card-header">
              <div class="card-title">
                {{ item.productName }}
                <el-tag v-if="item.status==1" type="success" effect="dark" class="card-tag">上架</el-tag>
                <el-tag v-if="item.status==0" type="danger" effect="dark" class="card-tag">下架</el-tag>
              </div>
              <div class="card-actions">
                <el-button 
                  link 
                  :type="item.status == 1 ? 'success' : 'warning'" 
                  size="small" 
                  @click="handleToggleStatus(item)"
                  :loading="item.statusLoading"
                >
                  {{ item.status == 1 ? '下架' : '上架' }}
                </el-button>
                <el-button link type="primary" size="small" @click="handleUpdate(item.id)">修改</el-button>
                <el-button link type="danger" size="small" @click="handleDelete(item.id)">删除</el-button>
              </div>
            </div>
            <div class="card-body">
              <div class="card-info-row">
                <el-icon class="info-icon"><Menu /></el-icon>
                <span class="card-label">类别：</span>
                <span class="card-value">{{ item.category }}</span>
              </div>
              <div class="card-info-row"><span class="card-label">供应商：</span><span class="card-value">{{ item.supplier }}</span></div>
              <div class="card-info-row"><span class="card-label">规格型号：</span><span class="card-value">{{ item.specification }}</span></div>
              <div class="card-info-row"><span class="card-label">存放位置：</span><span class="card-value">{{ item.location }}</span></div>
            </div>
            <div class="card-footer">
              <div class="card-info-row"><span class="card-label">入库数量：</span><span class="card-value">{{ item.inQuantity }}</span></div>
              <div class="card-info-row"><span class="card-label">介绍：</span><span class="card-value">{{ item.remark }}</span></div>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <!-- 分页控件 -->
      <div class="dashboard-pagination">
        <el-pagination
            v-model:current-page="queryPage.current"
            v-model:page-size="queryPage.size"
            :page-sizes="[6, 12, 18]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="queryPage.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <!-- 右侧：快捷录入 -->
    <div style="width: 280px; min-width: 220px; max-width: 340px; display: flex; flex-direction: column; align-items: center;">
      <div class="module-block" @click="dialogQuickEntryVisible=true">
        <el-icon class="module-icon" color="#409eff"><i-ep-plus /></el-icon>
        <div class="module-title">快捷录入</div>
        <div class="module-desc">一键添加新商品</div>
        <el-button type="primary" size="small">快捷录入</el-button>
      </div>
      <el-button
          class="scan-entry-btn"
          type="primary"
          size="large"
          @click="qrDialogVisible = true"
      >
        <svg class="scan-icon" width="20" height="20" viewBox="0 0 1024 1024">
          <rect x="160" y="160" width="160" height="40" rx="20" fill="#fff"/>
          <rect x="160" y="160" width="40" height="160" rx="20" fill="#fff"/>
          <rect x="824" y="160" width="40" height="160" rx="20" fill="#fff"/>
          <rect x="824" y="160" width="160" height="40" rx="20" fill="#fff"/>
          <rect x="160" y="824" width="160" height="40" rx="20" fill="#fff"/>
          <rect x="160" y="824" width="40" height="160" rx="20" fill="#fff"/>
          <rect x="824" y="824" width="40" height="160" rx="20" fill="#fff"/>
          <rect x="824" y="824" width="160" height="40" rx="20" fill="#fff"/>
          <rect x="320" y="480" width="384" height="64" rx="32" fill="#fff"/>
        </svg>
        扫码录入
      </el-button>
    </div>
  </div>

  <!--  添加-->
  <el-form
      ref="ruleFormRef"
      style="max-width: 600px"
      :model="form"
      :rules="rules"
      label-width="auto"
  >
    <el-dialog v-model="dialogFormVisible" title="添加库存信息" width="500">

      <el-form-item label="商品名称"  prop="productName">
        <el-input v-model="form.productName" autocomplete="off" />
      </el-form-item>

      <el-form-item label="类别" prop="category">
        <el-input v-model="form.category" autocomplete="off"/>
      </el-form-item>


      <el-form-item label="供应商"  prop="supplier">
        <el-input v-model="form.supplier" autocomplete="off" />
      </el-form-item>

      <el-form-item label="状态" prop="status">
        <el-radio-group v-model="form.status">
          <el-radio value="1" size="large">上架</el-radio>
          <el-radio value="0" size="large">下架</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="规格型号" prop="specification">
        <el-input v-model="form.specification" autocomplete="off" />
      </el-form-item>

      <el-form-item label="存放位置" prop="location">
        <el-input v-model="form.location" autocomplete="off"/>
      </el-form-item>

      <el-form-item label="入库数量" prop="inQuantity">
        <el-input v-model="form.inQuantity" autocomplete="off"/>
      </el-form-item>


      <el-form-item label="介绍" prop="remark">
        <el-input
            v-model="form.remark"
            style="width: 240px"
            autosize
            type="textarea"
            placeholder="请输入商品介绍"
        />
      </el-form-item>


      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handlerClose">取消</el-button>
          <el-button type="primary" @click="handlerSubmit">
            确定
          </el-button>
        </div>
      </template>

    </el-dialog>
  </el-form>





  <!--  修改对话框-->
  <el-dialog v-model="dialogFormVisible1" title="修改商品信息" width="500">
    <el-form :model="form">

      <el-form-item label="商品名称"  prop="productName">
        <el-input v-model="form.productName" autocomplete="off" />
      </el-form-item>

      <el-form-item label="类别" prop="category">
        <el-input v-model="form.category" autocomplete="off"/>
      </el-form-item>


      <el-form-item label="供应商"  prop="supplier">
        <el-input v-model="form.supplier" autocomplete="off" />
      </el-form-item>

      <el-form-item label="状态" prop="status">
        <el-radio-group v-model="form.status">
          <el-radio :value="1" size="large">上架</el-radio>
          <el-radio :value="0" size="large">下架</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="规格型号" prop="specification">
        <el-input v-model="form.specification" autocomplete="off" />
      </el-form-item>

      <el-form-item label="存放位置" prop="location">
        <el-input v-model="form.location" autocomplete="off"/>
      </el-form-item>

      <el-form-item label="入库数量" prop="inQuantity">
        <el-input v-model="form.inQuantity" autocomplete="off"/>
      </el-form-item>


      <el-form-item label="介绍" prop="remark">
        <el-input
            v-model="form.remark"
            style="width: 240px"
            autosize
            type="textarea"
            placeholder="请输入商品介绍"
        />
      </el-form-item>

    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handlerClose">取消</el-button>
        <el-button type="primary" @click="tijiao">
          提交
        </el-button>
      </div>
    </template>
  </el-dialog>

  <!-- 快捷录入弹窗 -->
  <el-dialog v-model="dialogQuickEntryVisible" title="快捷录入" width="500" class="quick-entry-dialog">
    <el-form
        ref="quickEntryFormRef"
        style="max-width: 600px"
        :model="quickEntryForm"
        :rules="quickEntryRules"
        label-width="auto"
    >
      <el-form-item label="商品名称"  prop="productName">
        <el-input v-model="quickEntryForm.productName" autocomplete="off">
          <template #prefix>
            <el-icon><Goods /></el-icon>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item label="类别" prop="category">
        <el-input v-model="quickEntryForm.category" autocomplete="off">
          <template #prefix>
            <el-icon><Menu /></el-icon>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item label="供应商"  prop="supplier">
        <el-input v-model="quickEntryForm.supplier" autocomplete="off">
          <template #prefix>
            <el-icon><User /></el-icon>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-radio-group v-model="quickEntryForm.status">
          <el-radio value="1" size="large">
            <el-icon style="margin-right:4px;"><List /></el-icon>上架
          </el-radio>
          <el-radio value="0" size="large">
            <el-icon style="margin-right:4px;"><List /></el-icon>下架
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="规格型号" prop="specification">
        <el-input v-model="quickEntryForm.specification" autocomplete="off">
          <template #prefix>
            <el-icon><List /></el-icon>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item label="存放位置" prop="location">
        <el-input v-model="quickEntryForm.location" autocomplete="off">
          <template #prefix>
            <el-icon><Location /></el-icon>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item label="入库数量" prop="inQuantity">
        <el-input v-model="quickEntryForm.inQuantity" autocomplete="off">
          <template #prefix>
            <el-icon><Plus /></el-icon>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item label="介绍" prop="remark">
        <el-input
            v-model="quickEntryForm.remark"
            style="width: 240px"
            autosize
            type="textarea"
            placeholder="请输入商品介绍"
        >
          <template #prefix>
            <el-icon><Edit /></el-icon>
          </template>
        </el-input>
      </el-form-item>
    </el-form>
    
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleQuickEntryClose">取消</el-button>
          <el-button type="primary" @click="handleQuickEntrySubmit">
            确定
          </el-button>
        </div>
      </template>
   
  </el-dialog>

  <el-dialog v-model="qrDialogVisible" title="扫码录入" width="340" :close-on-click-modal="true" class="qr-dialog">
    <div class="qr-content">
      <div class="qr-wrapper">
        <QrcodeVue 
          :value="mobileEntryUrl" 
          :size="200" 
          class="qr-img"
          :level="'M'"
          :render-as="'svg'"
        />
        <div v-if="qrError" class="qr-error">
          <el-icon><Warning /></el-icon>
          <span>二维码生成失败，请检查网络连接</span>
        </div>
      </div>
      <div class="qr-tip">请用手机扫码，填写商品信息</div>
      <div class="qr-url">{{ mobileEntryUrl }}</div>
      <div class="qr-actions">
        <el-button type="primary" size="small" @click="copyUrl" class="qr-copy-btn">
          <el-icon><CopyDocument /></el-icon>
          复制链接
        </el-button>
        <el-button type="success" size="small" @click="refreshQrCode" class="qr-refresh-btn">
          <el-icon><Refresh /></el-icon>
          刷新二维码
        </el-button>
      </div>
    </div>
  </el-dialog>

</template>


<script setup>
import {ref, computed} from "vue";
import {add, findAllPage, findById, remove, update} from "@/assets/products.js";
import {ElMessage, ElMessageBox} from "element-plus";
import QrcodeVue from 'qrcode.vue'
// 引入Element Plus图标
import { Goods, Menu, User, List, Location, Edit, Plus, Warning, CopyDocument, Refresh } from '@element-plus/icons-vue'

const tableData = ref([])

const queryPage = ref({
  "current": 1,
  "size": 8,
  total: 0
})

const handlerFindAll = () => {
  findAllPage(queryPage.value).then(res => {
    if (res.data.code == 200) {
      tableData.value = res.data.data.records
      queryPage.value.total = res.data.data.total
    }
  })
}

const handleSizeChange = (val) => {
  queryPage.value.current = 1
  queryPage.value.size = val
  handlerFindAll()
}

const handleCurrentChange = (val) => {
  queryPage.value.current = val
  handlerFindAll()

}


handlerFindAll()


// 删除
const handleDelete = (id) => {
  ElMessageBox.confirm("确定要删除此商品吗？此操作不可撤销", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  }).then(() => {
    // 调用删除API
    remove(id).then(res => {
      if (res.data.code === 200) {
        ElMessage.success("删除成功");
        handlerFindAll()// 刷新列表
      } else {
        ElMessage.error(res.data.message || "删除失败");
      }
    }).catch(err => {
      ElMessage.error("请求出错：" + err.message);
    });
  }).catch(() => {
    // 用户取消操作
  });
};


// 添加
const dialogFormVisible = ref(false)

const form = ref({
  productName: '',
  category: '',
  status: '',
  specification: '',
  supplier: '',
  location:'',
  remark:'',
  inQuantity:''
})


const rules = ref({
  productName: [
    {required: true, message: '商品名称不允许为空！', trigger: 'blur'},
  ],
  remark: [
    {required: true, message: '商品介绍不允许为空！', trigger: 'blur'},
  ],
  location: [
    {required: true, message: '存放位置不允许为空！', trigger: 'blur'},
  ],
  supplier: [
    {required: true, message: '供应商不允许为空！', trigger: 'blur'},
  ],
  category: [
    {required: true, message: '类别不允许为空！', trigger: 'blur'},
  ],
  specification: [
    {required: true, message: '规格型号不允许为空！', trigger: 'blur'},
  ]
})

const handleAdd=()=>{
  dialogFormVisible.value=true

  form.value={
    productName: '',
    category: '',
    status: '',
    specification: '',
    supplier: '',
    location:'',
    remark:'',
    inQuantity:''
  }
}


// 取消
const handlerClose=()=>{
  dialogFormVisible.value=false
  dialogFormVisible1.value=false

  form.value={
    productName: '',
    category: '',
    status: '',
    specification: '',
    supplier: '',
    location:'',
    remark:'',
    inQuantity:''
  }
}

// 确定
const handlerSubmit=()=>{
  add(form.value).then(res=>{
    if(res.data.code==200){
      ElMessage.success(res.data.message)
      handlerClose()
      handleAdd()
    }
  })
}


// 修改

const dialogFormVisible1=ref(false)

const handleUpdate = (id) => {
  // 查询商品信息
  findById(id).then(res => {
    if (res.data.code === 200) {
      form.value = {
        id: res.data.data.id,
        productName: res.data.data.productName,
        category: res.data.data.category,
        status: res.data.data.status,
        specification: res.data.data.specification,
        location: res.data.data.location,
        supplier: res.data.data.supplier,
        remark:res.data.data.remark,
        inQuantity:res.data.data.inQuantity
      };

      // 显示修改的对话框
      dialogFormVisible1.value = true;
    }else{
      ElMessage.error(res.data.message || "获取数据失败");
    }
  }).catch(err =>{
    ElMessage.error("请求出错：" + err.message);
  });
};


// 提交修改（需修改原有的handlerSubmit方法）
const tijiao = () => {
  if(confirm("你确定要修改吗"))
    if (form.value.id) {
      // 修改操作
      update(form.value).then(res => {
        if (res.data.code === 200) {
          ElMessage.success("修改成功");
          handlerClose();
          handlerFindAll()
        } else {
          ElMessage.error(res.data.message || "修改失败");
        }
      }).catch(err => {
        ElMessage.error("请求出错：" + err.message);
      });
    } else {
      // 新增操作（保持原有逻辑）
      add(form.value).then(res => {
        if (res.data.code === 200) {
          ElMessage.success(res.data.message);
          handlerClose();
        }
      });
    }
};

// 快捷录入弹窗控制
const dialogQuickEntryVisible = ref(false)

// 快捷录入表单
const quickEntryForm = ref({
  productName: '',
  category: '',
  status: '',
  specification: '',
  supplier: '',
  location:'',
  remark:'',
  inQuantity:''
})

const quickEntryRules = ref({
  productName: [
    {required: true, message: '商品名称不允许为空！', trigger: 'blur'},
  ],
  remark: [
    {required: true, message: '商品介绍不允许为空！', trigger: 'blur'},
  ],
  location: [
    {required: true, message: '存放位置不允许为空！', trigger: 'blur'},
  ],
  supplier: [
    {required: true, message: '供应商不允许为空！', trigger: 'blur'},
  ],
  category: [
    {required: true, message: '类别不允许为空！', trigger: 'blur'},
  ],
  specification: [
    {required: true, message: '规格型号不允许为空！', trigger: 'blur'},
  ]
})

// 关闭快捷录入弹窗
const handleQuickEntryClose = () => {
  dialogQuickEntryVisible.value = false
  quickEntryForm.value = {
    productName: '',
    category: '',
    status: '',
    specification: '',
    supplier: '',
    location:'',
    remark:'',
    inQuantity:''
  }
}

// 提交快捷录入
const handleQuickEntrySubmit = () => {
  add(quickEntryForm.value).then(res=>{
    if(res.data.code==200){
      ElMessage.success(res.data.message)
      handleQuickEntryClose()
      // 可选：刷新列表
      handlerFindAll && handlerFindAll()
    }
  })
}

const qrDialogVisible = ref(false)

// 动态获取当前域名和端口
const getCurrentBaseUrl = () => {
  const protocol = window.location.protocol
  const hostname = window.location.hostname
  const port = window.location.port
  
  // 如果是开发环境，使用当前端口
  if (process.env.NODE_ENV === 'development') {
    return `${protocol}//${hostname}:${port}`
  }
  
  // 生产环境使用当前域名
  return `${protocol}//${hostname}`
}

// 动态生成移动端入口URL
const mobileEntryUrl = computed(() => {
  const baseUrl = getCurrentBaseUrl()
  return `${baseUrl}/mobile-entry?scene=inventory&timestamp=${Date.now()}`
})

const copyUrl = async () => {
  try {
    await navigator.clipboard.writeText(mobileEntryUrl.value)
    ElMessage.success('链接已复制到剪贴板')
  } catch (err) {
    // 降级处理：创建临时输入框复制
    const textArea = document.createElement('textarea')
    textArea.value = mobileEntryUrl.value
    document.body.appendChild(textArea)
    textArea.select()
    try {
      document.execCommand('copy')
      ElMessage.success('链接已复制到剪贴板')
    } catch (fallbackErr) {
      ElMessage.error('复制失败，请手动复制链接')
    }
    document.body.removeChild(textArea)
  }
}

// 切换商品状态（上架/下架）
const handleToggleStatus = (item) => {
  const newStatus = item.status === 1 ? 0 : 1;
  const actionText = newStatus === 1 ? '上架' : '下架';
  
  ElMessageBox.confirm(
    `确定要${actionText}商品"${item.productName}"吗？`, 
    "状态切换确认", 
    {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning"
    }
  ).then(() => {
    // 设置加载状态
    item.statusLoading = true;
    
    // 准备更新数据
    const updateData = {
      id: item.id,
      productName: item.productName,
      category: item.category,
      status: newStatus,
      specification: item.specification,
      location: item.location,
      supplier: item.supplier,
      remark: item.remark,
      inQuantity: item.inQuantity
    };
    
    // 调用更新API
    update(updateData).then(res => {
      if (res.data.code === 200) {
        // 更新本地数据
        item.status = newStatus;
        ElMessage.success(`${actionText}成功`);
      } else {
        ElMessage.error(res.data.message || `${actionText}失败`);
      }
    }).catch(err => {
      ElMessage.error("请求出错：" + err.message);
    }).finally(() => {
      // 清除加载状态
      item.statusLoading = false;
    });
  }).catch(() => {
    // 用户取消操作
  });
};

const qrError = ref(false)

const refreshQrCode = () => {
  qrError.value = false
}

</script>


<style scoped>
body {
  background: #f6f8fa;
}
.dashboard-welcome {
  text-align: center;
  margin: 48px 0 24px 0;
}
.dashboard-welcome h2 {
  font-size: 40px;
  font-weight: 900;
  margin-bottom: 10px;
  color: #1976d2;
  letter-spacing: 2px;
  text-shadow: 0 4px 16px rgba(30, 144, 255, 0.12), 0 1px 0 #fff;
  font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif;
}
.dashboard-welcome p {
  color: #5a6a7a;
  font-size: 20px;
  font-weight: 400;
  font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif;
  letter-spacing: 1.5px;
  margin-top: 0;
  margin-bottom: 0;
  text-shadow: 0 2px 8px rgba(30,144,255,0.08);
}
.dashboard-stats {
  margin-bottom: 32px;
}
.stat-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  border-radius: 14px;
  min-height: 90px;
  position: relative;
  overflow: hidden;
  color: #fff;
}
.stat-title {
  font-size: 15px;
  margin-bottom: 6px;
}
.stat-value {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 4px;
}
.stat-card .el-icon {
  position: absolute;
  right: 18px;
  bottom: 12px;
  font-size: 32px;
  opacity: 0.18;
}
.stat-blue {
  background: linear-gradient(135deg, #409eff 60%, #6ec6ff 100%);
}
.stat-green {
  background: linear-gradient(135deg, #67c23a 60%, #b2e59f 100%);
}
.stat-red {
  background: linear-gradient(135deg, #f56c6c 60%, #ffb6b6 100%);
}
.stat-orange {
  background: linear-gradient(135deg, #e6a23c 60%, #ffd591 100%);
}
.dashboard-actions {
  display: flex;
  justify-content: flex-end;
  margin: 0 0 18px 0;
  padding: 0 10px;
}
.add-btn {
  border-radius: 18px;
  font-size: 19px;
  padding: 23px 37px;
}
.dashboard-cards {
  padding: 0 40px;
  justify-content: center; /* 居中显示卡片 */
}

/* 卡片整体美化 */
.custom-card {
  border-radius: 24px;
  box-shadow: 0 8px 32px 0 rgba(64, 158, 255, 0.13), 0 2px 8px 0 rgba(0, 0, 0, 0.06);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  overflow: hidden;
  min-width: 360px;
  max-width: 400px;
  min-height: 300px;
  position: relative;
  background: linear-gradient(135deg, #fafdff 60%, #e9f1fb 100%);
  border: 1.5px solid #e3eaf5;
}

/* 顶部渐变条更宽更亮 */
.custom-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 7px;
  background: linear-gradient(90deg, #667eea 0%, #409eff 100%);
  z-index: 1;
  border-radius: 24px 24px 0 0;
  transition: background 0.3s;
}

/* 状态色条 */
.custom-card[data-status="1"]::before {
  background: linear-gradient(90deg, #67c23a 0%, #85ce61 100%);
}
.custom-card[data-status="0"]::before {
  background: linear-gradient(90deg, #f56c6c 0%, #f78989 100%);
}

/* 悬停效果 */
.custom-card:hover {
  box-shadow: 0 16px 48px 0 rgba(64, 158, 255, 0.22), 0 4px 16px 0 rgba(0, 0, 0, 0.10);
  transform: translateY(-8px) scale(1.035);
  border-color: #b3d8ff;
}
.custom-card:hover::before {
  filter: brightness(1.15);
}

/* 卡片头部 */
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
  padding: 24px 24px 0 24px;
  position: relative;
  z-index: 2;
}

/* 商品名+标签 */
.card-title {
  font-size: 22px;
  font-weight: bold;
  color: #1976d2;
  display: flex;
  align-items: center;
  line-height: 1.3;
  gap: 10px;
}
.card-tag {
  margin-left: 10px;
  border-radius: 14px;
  font-weight: 700;
  padding: 5px 14px;
  font-size: 15px;
  box-shadow: 0 2px 8px rgba(64,158,255,0.10);
  background: linear-gradient(90deg, #67c23a 0%, #b2e59f 100%);
  border: none;
}
.custom-card[data-status="0"] .card-tag {
  background: linear-gradient(90deg, #f56c6c 0%, #ffb6b6 100%);
}

/* 操作按钮 */
.card-actions {
  display: flex;
  gap: 10px;
  position: relative;
  top: -4px;
}
.card-actions .el-button {
  font-size: 14px;
  padding: 5px 12px;
  border-radius: 10px;
  font-weight: 500;
  transition: all 0.2s;
  background: #f7fafd;
  color: #409eff;
  border: 1px solid #e3eaf5;
}
.card-actions .el-button:hover {
  background: #e3f0fc;
  color: #1976d2;
  font-weight: bold;
  box-shadow: 0 2px 8px rgba(64,158,255,0.10);
}

/* 切换状态按钮特殊样式 */
.card-actions .el-button[type="success"] {
  background: linear-gradient(135deg, #67c23a 0%, #85ce61 100%);
  color: #fff;
  border: none;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(103, 194, 58, 0.15);
}
.card-actions .el-button[type="success"]:hover {
  background: linear-gradient(135deg, #5daf34 0%, #67c23a 100%);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(103, 194, 58, 0.25);
}

.card-actions .el-button[type="warning"] {
  background: linear-gradient(135deg, #e6a23c 0%, #f0c78a 100%);
  color: #fff;
  border: none;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(230, 162, 60, 0.15);
}
.card-actions .el-button[type="warning"]:hover {
  background: linear-gradient(135deg, #d49426 0%, #e6a23c 100%);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(230, 162, 60, 0.25);
}

/* 内容区 */
.card-body {
  margin-bottom: 16px;
  padding: 0 24px;
  position: relative;
  z-index: 2;
  background: linear-gradient(135deg, #ffffff 0%, #fafdff 100%);
  border-radius: 14px;
  box-shadow: 0 1px 4px rgba(64,158,255,0.04);
}

/* 底部区 */
.card-footer {
  border-top: 1.5px solid #e3eaf5;
  padding: 18px 24px 22px 24px;
  margin-top: 8px;
  color: #888;
  font-size: 15px;
  position: relative;
  z-index: 2;
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
  border-radius: 0 0 18px 18px;
}

/* 信息行美化 */
.card-info-row {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  padding: 7px 0;
  border-radius: 8px;
  transition: background-color 0.2s;
  font-size: 15px;
  gap: 8px;
}
.card-info-row:hover {
  background: rgba(64, 158, 255, 0.07);
  padding-left: 10px;
  padding-right: 10px;
}
.card-label {
  color: #409eff;
  min-width: 80px;
  font-size: 15px;
  font-weight: 600;
  display: flex;
  align-items: center;
}
.card-label::before {
  content: '•';
  color: #409eff;
  margin-right: 6px;
  font-weight: bold;
}
.card-value {
  color: #34495e;
  font-size: 15px;
  font-weight: 500;
  flex: 1;
}

/* 美化分页控件 */
.dashboard-pagination {
  display: flex;
  justify-content: center;
  margin: 32px 0 0 0;
}
:deep(.el-pagination) {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(64,158,255,0.08);
  padding: 10px 24px;
  min-width: 320px;
  font-size: 15px;
}
:deep(.el-pagination .el-pager li) {
  border-radius: 8px;
  margin: 0 2px;
  transition: background 0.2s, color 0.2s;
  min-width: 32px;
  height: 32px;
  line-height: 32px;
}
:deep(.el-pagination .el-pager li.active) {
  background: #409eff;
  color: #fff;
  font-weight: bold;
  box-shadow: 0 2px 8px rgba(64,158,255,0.12);
}
:deep(.el-pagination .el-pager li:hover) {
  background: #e3f0fc;
  color: #409eff;
}
:deep(.el-pagination .el-pagination__sizes .el-select .el-input__inner) {
  border-radius: 8px;
  background: #f6f8fa;
}
:deep(.el-pagination .el-pagination__jump .el-input__inner) {
  border-radius: 8px;
  background: #f6f8fa;
}

/* 响应式设计 */
@media (max-width: 900px) {
  .dashboard-actions {
    padding: 0 10px;
  }
  .custom-card {
    min-width: 90vw;
    max-width: 98vw;
  }
}
@media (max-width: 600px) {
  .custom-card {
    min-width: 90vw;
    max-width: 98vw;
  }
}

/* 快捷录入模块样式 */
.dashboard-modules {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 32px 0 32px 0;
}
.module-block {
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
  border: 2px solid #e5e6eb;
  width: 253px;
  min-height: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 24px rgba(64,158,255,0.08);
  transition: all 0.25s ease;
  cursor: pointer;
  padding: 14px 0 22px 0;
  border-radius: 16px;
  position: relative;
  overflow: hidden;
}

.module-block::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #409eff 0%, #6ec6ff 100%);
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.module-block:hover {
  border-color: #409eff;
  box-shadow: 0 8px 32px rgba(64,158,255,0.16);
  transform: translateY(-4px) scale(1.03);
}

.module-block:hover::before {
  transform: scaleX(1);
}

.module-icon {
  font-size: 32px;
  margin-bottom: 10px;
  transition: transform 0.3s ease;
}

.module-block:hover .module-icon {
  transform: scale(1.1) rotate(5deg);
}

.module-title {
  font-size: 22px;
  color: #1976d2;
  font-weight: 700;
  margin-bottom: 6px;
  letter-spacing: 1px;
}
.module-desc {
  font-size: 15px;
  color: #888;
  margin-bottom: 18px;
  font-weight: 400;
}
.module-block .el-button {
  font-size: 17px;
  padding: 8px 32px;
  border-radius: 10px;
  font-weight: 600;
  letter-spacing: 1px;
  transition: all 0.3s ease;
}

.module-block .el-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
}

.qr-dialog .el-dialog__body {
  padding: 48px 36px 36px 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: linear-gradient(135deg, #fafdff 70%, #e9f1fb 100%);
  border-radius: 22px;
}

.qr-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.qr-wrapper {
  margin-bottom: 32px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.qr-img {
  margin-bottom: 0;
  border-radius: 20px;
  box-shadow: 0 10px 32px rgba(60,120,200,0.16);
  background: white;
  padding: 16px;
  transition: all 0.3s ease;
}

.qr-img:hover {
  transform: scale(1.02);
  box-shadow: 0 15px 40px rgba(60,120,200,0.25);
}

.qr-error {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(245, 108, 108, 0.9);
  color: white;
  padding: 16px 24px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 16px rgba(245, 108, 108, 0.3);
}

.qr-tip {
  color: #409eff;
  font-size: 22px;
  margin-bottom: 18px;
  font-weight: 700;
}

.qr-url {
  font-size: 18px;
  color: #888;
  word-break: break-all;
  margin-bottom: 18px;
  text-align: center;
  background: #f7fafd;
  border-radius: 12px;
  padding: 10px 18px;
}

.qr-actions {
  display: flex;
  justify-content: center;
  gap: 16px;
}

.qr-copy-btn,
.qr-refresh-btn {
  border-radius: 12px;
  font-size: 18px;
  padding: 8px 28px;
}

.qr-copy-btn {
  background: linear-gradient(90deg, #409eff 0%, #66b1ff 100%);
  color: #fff;
  border: none;
}

.qr-refresh-btn {
  background: linear-gradient(90deg, #67c23a 0%, #85ce61 100%);
  color: #fff;
  border: none;
}

.scan-entry-btn {
  border-radius: 24px;
  font-size: 18px;
  font-weight: 600;
  padding: 12px 36px 12px 24px;
  background: linear-gradient(90deg, #409eff 0%, #66b1ff 100%);
  box-shadow: 0 4px 16px rgba(64,158,255,0.10);
  display: flex;
  align-items: center;
  gap: 10px;
  transition: background 0.2s, box-shadow 0.2s, transform 0.2s;
  border: none;
      margin-top: 40px
}

.scan-entry-btn:hover,
.scan-entry-btn:focus {
  background: linear-gradient(90deg, #357ae8 0%, #409eff 100%);
  box-shadow: 0 8px 32px rgba(64,158,255,0.18);
  transform: translateY(-2px) scale(1.03);
  color: #fff;
}

.scan-icon {
  margin-right: 8px;
  vertical-align: middle;
  display: inline-block;
}

/* 快捷录入弹窗美化 */
:deep(.el-dialog__wrapper) {
  /* 弹窗外层背景可加淡色渐变 */
  background: rgba(64, 158, 255, 0.04);
}

:deep(.el-dialog) {
  border-radius: 18px !important;
  box-shadow: 0 8px 40px rgba(64,158,255,0.18);
  background: linear-gradient(135deg, #fafdff 70%, #e9f1fb 100%);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

:deep(.el-dialog__header) {
  text-align: center;
  font-size: 22px;
  font-weight: bold;
  color: #1976d2;
  letter-spacing: 1px;
  padding-bottom: 8px;
}

:deep(.el-dialog__body) {
  padding: 28px 32px 12px 32px;
  background: transparent;
}

:deep(.el-form) {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

:deep(.el-form-item) {
  margin-bottom: 12px;
}

:deep(.el-form-item__label) {
  font-size: 16px;
  color: #409eff;
  font-weight: 600;
  letter-spacing: 1px;
}

:deep(.el-input__wrapper) {
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(64,158,255,0.08);
  background: #f7fafd;
  transition: box-shadow 0.2s;
}

:deep(.el-input__wrapper:hover),
:deep(.el-input__wrapper:focus-within) {
  box-shadow: 0 4px 16px rgba(64,158,255,0.16);
}

:deep(.el-textarea__inner) {
  border-radius: 10px;
  background: #f7fafd;
  font-size: 15px;
}

:deep(.el-radio-group) {
  gap: 18px;
}

:deep(.el-radio) {
  font-size: 15px;
  padding: 0 8px;
}

.dialog-footer {
  display: flex;
  justify-content: center;
  gap: 32px;
  margin-top: 18px;
}

.dialog-footer .el-button {
  min-width: 90px;
  font-size: 16px;
  border-radius: 10px;
  font-weight: 600;
  letter-spacing: 1px;
  transition: all 0.2s;
  box-shadow: 0 2px 8px rgba(64,158,255,0.08);
}

.dialog-footer .el-button[type="primary"] {
  background: linear-gradient(90deg, #409eff 0%, #66b1ff 100%);
  color: #fff;
  border: none;
}

.dialog-footer .el-button[type="primary"]:hover {
  background: linear-gradient(90deg, #357ae8 0%, #409eff 100%);
  box-shadow: 0 4px 16px rgba(64,158,255,0.18);
  transform: translateY(-2px) scale(1.03);
}

.dialog-footer .el-button:not([type="primary"]):hover {
  color: #409eff;
  border-color: #409eff;
  background: #f0f8ff;
}

/* 主内容区整体背景和分区 */
.main-content {
  display: flex;
  gap: 36px;
  align-items: flex-start;
  background: linear-gradient(120deg, #fafdff 60%, #e9f1fb 100%);
  border-radius: 24px;
  box-shadow: 0 8px 40px rgba(64,158,255,0.08);
  padding: 36px 32px 32px 32px;
  margin: 32px 0 0 0;
  min-height: 600px;
  position: relative;
  overflow: visible;
}

/* 卡片区居中且多列自适应 */
.dashboard-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 36px 32px;
  padding: 0 10px;
  justify-items: center;
  align-items: stretch;
  width: 100%;
}

/* 卡片区左右分隔线（可选） */
.main-content::before,
.main-content::after {
  content: '';
  display: block;
  position: absolute;
  top: 32px;
  bottom: 32px;
  width: 2px;
  background: linear-gradient(to bottom, #e3eaf5 10%, #fff0 90%);
  z-index: 0;
}
.main-content::before {
  left: 0;
}
.main-content::after {
  right: 0;
}

/* 右侧快捷录入区美化 */
.main-content > div:last-child {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 4px 24px rgba(64,158,255,0.10);
  padding: 32px 18px 24px 18px;
  min-width: 240px;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: sticky;
  top: 80px;
}

/* 响应式优化 */
@media (max-width: 1200px) {
  .main-content {
    flex-direction: column;
    gap: 24px;
    padding: 18px 6px 18px 6px;
  }
  .main-content > div:last-child {
    position: static;
    width: 100%;
    max-width: 100%;
    margin-top: 24px;
  }
  .dashboard-cards {
    grid-template-columns: repeat(auto-fit, minmax(90vw, 1fr));
    gap: 18px 0;
    padding: 0;
  }
}

.info-icon {
  color: #b3d8ff;
  font-size: 18px;
  margin-right: 4px;
}

.quick-entry-dialog :deep(.el-form-item__label) {
  font-size: 26px;
  font-weight: 900;
  background: linear-gradient(90deg, #1976d2 10%, #409eff 90%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
  letter-spacing: 2px;
  text-shadow: 0 2px 8px rgba(64,158,255,0.10), 0 1px 0 #fff;
  font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif;
}
.quick-entry-dialog :deep(.el-input__wrapper),
.quick-entry-dialog :deep(.el-textarea__inner) {
  font-size: 22px;
  min-height: 56px;
  border-radius: 18px;
  color: #223355;
}
.quick-entry-dialog :deep(.el-input__inner) {
  font-size: 22px;
  min-height: 56px;
  color: #223355;
}
.quick-entry-dialog :deep(.el-radio) {
  font-size: 22px;
  padding: 0 18px;
}
.quick-entry-dialog :deep(.el-radio-group) {
  gap: 38px;
}
.quick-entry-dialog .dialog-footer .el-button {
  min-width: 150px;
  font-size: 24px;
  border-radius: 18px;
  padding: 16px 0;
  font-weight: 800;
  letter-spacing: 2px;
}
.quick-entry-dialog :deep(.el-form-item) {
  margin-bottom: 28px;
}
</style>








